<template>
    <div class="audit">
        <li>审核管理</li>
        <el-card class="box-card">
            <div class="tab">
                <el-button v-for="(v,i) in tabs" :key="i" @click="tabIndex=i" :class="tabIndex===i?'active':''">{{v}}</el-button>
            </div>
            <div class="audit_box">
                <div class="city">
                    <el-select v-model="city1" clearable placeholder="请选择" @change="changeOne" >
                        <el-option v-for="v in option1" :key="v.provinceid" :label="v.province" :value="v.provinceid"></el-option>
                    </el-select>
                    <el-select v-model="city2" clearable placeholder="请选择" @change="changeTwo" >
                        <el-option v-for="v in option2" :key="v.cityid" :label="v.city" :value="v.cityid"></el-option>
                    </el-select>
                    <el-select v-model="city3" clearable placeholder="请选择" >
                        <el-option v-for="(v,i) in option3" :key="i" :label="v.area" :value="v.area"></el-option>
                    </el-select>
                </div>
                <div class="searchAudit">
                    <el-input v-model="keyword" placeholder="请输入内容"></el-input>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </div>
            </div>
            <el-table
                :data="auditList"
                stripe
                border >
                <el-table-column type="index" label="序号" width="80" ></el-table-column>
                <el-table-column label="小区名称" prop="Villagename" ></el-table-column>
                <el-table-column label="标题" prop="title" ></el-table-column>
                <el-table-column label="面积" prop="area" ></el-table-column>
                <el-table-column label="总价" prop="price" ></el-table-column>
                <el-table-column label="排序" prop="sort" ></el-table-column>
                <el-table-column label="状态" prop="state" ></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleAudit(scope.row)">审核</el-button>
                        <el-button type="text" @click="editAudit(scope.row)">编辑</el-button>
                        <el-button type="text" @click="deleteAudit(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageIndex"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <el-dialog title="" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="小区名称" :label-width="formLabelWidth">
                    <el-input v-model="form.Villagename" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="面积" :label-width="formLabelWidth">
                    <el-input v-model="form.area" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="总价" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" :label-width="formLabelWidth">
                    <el-input v-model="form.sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-input v-model="form.state" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submin">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tabs: ['全部', '审核通过', '审核不通过'],
      auditList: [],
      tabIndex: 0,
      page: {
        pageIndex: 1,
        pageSize: 5
      },
      total: 0,
      keyword: '',
      city1: '',
      city2: '',
      city3: '',
      option1: [],
      option2: [],
      option3: [],
      form: {
        Villagename: '',
        title: '',
        area: '',
        price: '',
        sort: '',
        state: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '80px'
    }
  },
  created () {
    this.getAuditList()
    this.getCityList()
  },
  methods: {
    getAuditList () { // 获取数据信息
      this.$api.getAuditData({ pageIndex: this.page.pageIndex, pageSize: this.page.pageSize }).then(res => {
        if (res.data.code === 1) {
          this.auditList = res.data.data
          this.total = res.data.total
          this.$message.success('获取成功')
        }
      })
    },
    getCityList () { // 获取省
      this.$api.getProvince().then(res => {
        if (res.data.code === 1) {
          this.option1 = res.data.data
        }
      })
    },
    changeOne (value) {
      this.$api.getCity({ provinceid: value }).then(res => {
        if (res.data.code === 1) {
          this.option2 = res.data.data
        }
      })
    },
    changeTwo (value) {
      this.$api.getArea({ cityid: value }).then(res => {
        if (res.data.code === 1) {
          this.option3 = res.data.data
        }
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getAuditList()
    },
    handleCurrentChange (val) {
      this.page.pageIndex = val
      this.getAuditList()
    },
    handleSearch () { // 模糊搜索
      this.$api.auditSearch({ keyword: this.keyword }).then(res => {
        if (res.data.code === 1) {
          this.auditList = res.data.data
          this.$message.success('查找成功')
        }
      })
    },
    deleteAudit (row) { // 删除
      this.$api.auditDelete({ id: row.id }).then(res => {
        if (res.data.code === 1) {
          this.$message.success(res.data.message)
          this.getAuditList()
        }
      })
    },
    editAudit (row) {
      this.dialogFormVisible = true
      this.form = row
    },
    submin () { // 编辑
      this.$api.auditEdit(this.form).then(res => {
        if (res.data.code === 1) {
          this.dialogFormVisible = false
          this.$message.success(res.data.message)
          this.getAuditList()
        }
      })
    },
    handleAudit (row) { // 审核
      this.$api.Auditby({ id: row.id }).then(res => {
        if (res.data.code === 1) {
          this.$message.success('审核成功')
          this.getAuditList()
        }
      })
    }
  }
}
</script>

<style>
.audit{
    width: 100%;
    height: 100%;
}
.box-card{
    margin-top: 10px;
}
.el-button.active{
    background: cornflowerblue;
    color: #fff;
}
.audit_box{
    width: 100%;
    display: flex;
    margin: 5px 0;
}
.city{
    display: flex;
    justify-content: space-around;
}
.el-select{
    margin: 0 5px;
}
.searchAudit{
    display: flex;
    margin-left: 10px;
}
</style>
